// hooks-lanjiazhai 懒加载封装逻辑，提供响应式数据。
import { useIntersectionObserver } from '@vueuse/core' // 懒加载插件
import { ref } from 'vue'
// 数据懒加载函数
export const lanjiazhai = (target, API, id) => {
//   const target = ref(null)
  const result = ref([])
  const { stop } = useIntersectionObserver(
    target, // target 是观察的目标dom容器
    // isIntersecting 是否进入可视区域，值为布尔  observerElement 被观察的dom
    ([{ isIntersecting }], observerElement) => {
      if (isIntersecting) {
        stop() // 监听暂停
        // 调用API获取数据
        API(id).then(data => { // 可视窗口加载到，进行数据请求
          result.value = data.result // 赋值返回
        })
      }
    },
    {
      threshold: 0
    }
  )
  // 返回--->数据（dom,后台数据）
  return result
}
